<template>
  <div>
    <el-tabs class="el-tabs--shadowless" style="min-height: 86vh">
      <el-tab-pane label="收益情况表">
        <el-form @submit.native.prevent :inline="true">
          <el-form-item>
            <el-date-picker
              v-model="queryDate"
              type="month"
              placeholder="选择月"
              :picker-options="pickerOptions"
              @change="handleDateQuery()"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="handleDateQuery()">查询</el-button>
          </el-form-item>
          <el-form-item v-if="buttonEdit">
            <el-button :icon="`el-icon-${profitButton ? 'plus' : 'edit'}`" @click="handleNewProfit">
              {{ profitButton ? '新增' : '编辑' }}
            </el-button>
          </el-form-item>
        </el-form>
        <supervise-month-profit ref="profit" @back="setProfitButton"></supervise-month-profit>
      </el-tab-pane>
      <el-tab-pane label="资产负债表">
        <el-form @submit.native.prevent :inline="true">
          <el-form-item>
            <el-date-picker
              v-model="debtDate"
              type="month"
              placeholder="选择月"
              :picker-options="pickerOptions"
              @change="handleDateDebt()"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="handleDateDebt()">查询</el-button>
          </el-form-item>
          <el-form-item v-if="buttonEdit">
            <el-button :icon="`el-icon-${debtButton ? 'plus' : 'edit'}`" @click="handleNewDebt">
              {{ debtButton ? '新增' : '编辑' }}
            </el-button>
          </el-form-item>
        </el-form>
        <supervise-month-debt ref="debt" @back="setDebtButton"></supervise-month-debt>
      </el-tab-pane>
      <el-tab-pane label="风险指标表">
        <el-form @submit.native.prevent :inline="true">
          <el-form-item>
            <el-date-picker
              v-model="riskDate"
              type="month"
              placeholder="选择月"
              :picker-options="pickerOptions"
              @change="handleDateRisk()"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" @click="handleDateRisk()">查询</el-button>
          </el-form-item>
          <el-form-item v-if="buttonEdit">
            <el-button :icon="`el-icon-${riskButton ? 'plus' : 'edit'}`" @click="handleNewRisk">
              {{ riskButton ? '新增' : '编辑' }}
            </el-button>
          </el-form-item>
        </el-form>
        <supervise-month-risk ref="risk" @back="setRiskButton"></supervise-month-risk>
      </el-tab-pane>
    </el-tabs>
    <supervise-month-profit-dialog
      :visible.sync="profitVisible"
      @success="handleDateQuery()"
      :edit-mode="true"
    ></supervise-month-profit-dialog>
    <supervise-month-debt-dialog
      :visible.sync="debtVisible"
      @success="handleDateDebt()"
      :edit-mode="true"
    ></supervise-month-debt-dialog>
    <supervise-month-risk-dialog
      :visible.sync="riskVisible"
      @success="handleDateRisk()"
      :edit-mode="true"
    ></supervise-month-risk-dialog>
  </div>
</template>

<script>
import SuperviseMonthProfit from '@/credit/views/city/report/SuperviseMonthProfit'
import SuperviseMonthProfitDialog from '@/credit/views/city/report/SuperviseMonthProfitDialog'
import SuperviseMonthDebt from '@/credit/views/city/report/SuperviseMonthDebt'
import SuperviseMonthDebtDialog from '@/credit/views/city/report/SuperviseMonthDebtDialog'
import SuperviseMonthRisk from '@/credit/views/city/report/SuperviseMonthRisk'
import SuperviseMonthRiskDialog from '@/credit/views/city/report/SuperviseMonthRiskDialog'
import { mapGetters } from 'vuex'
import { getMonthLastDayDate } from '@/common/plugins/tools/date'
const setDay = 15
export function buttonEdit() {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth()
  const lastDay = getMonthLastDayDate(year, month - 1)
  const day = month === 9 ? 22 : setDay
  let buttonEdit = false
  if (lastDay < date && new Date(year, month, day) > date) {
    buttonEdit = true
  }
  return buttonEdit
}
export default {
  components: {
    SuperviseMonthProfit,
    SuperviseMonthProfitDialog,
    SuperviseMonthDebt,
    SuperviseMonthDebtDialog,
    SuperviseMonthRisk,
    SuperviseMonthRiskDialog,
  },
  props: {},
  data() {
    return {
      queryDate: '',
      debtDate: '',
      riskDate: '',
      pickerOptions: {
        disabledDate(time) {
          const date = new Date()
          const month = date.getMonth()
          let maxTime = new Date(date.getFullYear(), month - 1)
          return time < new Date(2020, 8) || time > maxTime
        },
      },
      profitVisible: false,
      profitButton: true,
      debtVisible: false,
      debtButton: true,
      riskVisible: false,
      riskButton: true,
    }
  },
  computed: {
    ...mapGetters(['user']),
    buttonEdit() {
      return buttonEdit() && +this.user.isReporter === 1
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    setDebtButton(value) {
      this.debtButton = value
    },
    setRiskButton(value) {
      this.riskButton = value
    },
    setProfitButton(value) {
      this.profitButton = value
    },
    handleDateQuery() {
      const params = {}
      params['year_number.eq'] = this.queryDate ? this.queryDate.getFullYear() : ''
      params['month_number.eq'] = this.queryDate ? this.queryDate.getMonth() + 1 : ''
      this.$refs.profit.getData(params)
    },
    handleNewProfit() {
      this.profitVisible = true
    },
    handleNewDebt() {
      this.debtVisible = true
    },
    handleDateDebt() {
      const params = {}
      params['year_number.eq'] = this.debtDate ? this.debtDate.getFullYear() : ''
      params['month_number.eq'] = this.debtDate ? this.debtDate.getMonth() + 1 : ''
      this.$refs.debt.getData(params)
    },
    handleNewRisk() {
      this.riskVisible = true
    },
    handleDateRisk() {
      const params = {}
      params['year_number.eq'] = this.riskDate ? this.riskDate.getFullYear() : ''
      params['month_number.eq'] = this.riskDate ? this.riskDate.getMonth() + 1 : ''
      this.$refs.risk.getData(params)
    },
  },
}
</script>

<style lang="scss" scoped></style>
